<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="提交审核" />
    </el-steps>

    <el-form :rules="rules" label-width="120px">
      <el-form-item label="课程封面">

        <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :action="devURl" name="file" class="avatar-uploader">
          <img v-if="courseInfo.cover" :src="courseInfo.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
      </el-form-item>

      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <div class="block">
          <el-cascader v-model="courseClassId" :options="options1" :props="{ label: 'title', value: 'id', children: 'children' }" @change="handleChange" />
        </div>
      </el-form-item>
      {{ courseClassId }}
      <!-- 课程讲师 TODO -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      {{ courseInfo.teacherId
      }}

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数" />
      </el-form-item>

      <!-- 课程简介 TODO -->

      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>
      <!-- 课程封面 TODO -->

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元" /> 元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import course from '@/api/edu/course'
import teacher from '@/api/edu/teacher'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },
  data() {
    return {
      devURl: process.env.BASE_API + '/qiNiuYun/uploadImage?timestamp=100',
      courseClassId: [],
      options1: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则'
            }
          ]
        }
      ],

      selectOptions: [],
      teacherId: '',
      saveBtnDisabled: false,
      courseInfo: {
        title: '',
        subjectParentId: '',
        subjectId: '',
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '', // 课程封面url
        price: 0
      },
      isFlag: null,
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTeacher()
    this.getSubject()
    if (this.$route.params.courseId) {
      this.dataShow(this.$route.params.courseId)
    }
  },
  methods: {
    // 多级联动改变
    handleChange(value) {
      this.courseInfo.subjectParentId = value[0]
      this.courseInfo.subjectId = value[1]
      console.log(value)
    },
    // 请求教师
    getTeacher() {
      teacher.getTeacher().then(response => {
        this.selectOptions = response.data.items
      })
    },
    // 请求多级课程分类
    getSubject() {
      subject.getSubjectList().then(response => {
        this.options1 = response.data.allSubject
        console.log(this.options1)
      })
    },
    // 下一步
    async next() {
      // 总:存在修改和保存的逻辑.

      // 1. 判断这个id是否存在.true存在,false不存在
      const isCourseId = await course.isExist(this.$route.params.courseId).then(response => {
        console.log(response.data.isExist)
        return response.data.isExist
      })
      // 2.存在的话,是进行update
      if (isCourseId) {
        course.updateCourseInfo(this.courseInfo).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          console.log('update' + response.data.courseId)
          this.$router.push({ path: '/course/chapter/' + response.data.courseId })
        })
      } else {
        // 3.不存在的,是进行insert
        course.addCourseInfo(this.courseInfo).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })

          this.$router.push({ path: '/course/chapter/' + response.data.courseId })
        })
      }
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.courseInfo.cover = res.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 课程基本信息 数据回显.
    dataShow(courseId) {
      course.getAllSubject(courseId).then(response => {
        console.log(response.data.courseInfo)
        this.courseInfo = response.data.courseInfo
        this.courseClassId = [response.data.courseInfo.subjectParentId, response.data.courseInfo.subjectId]
        console.log(this.courseInfo)
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 400px;
  height: 250px;
  display: block;
}
.tinymce-container {
  line-height: 29px;
}
</style>
